<template>
  <view v-show="isShow" class="popup-draggable" :class="isMoveEnd ? 'transition' : ''" :style="popupStyle" @touchmove.stop="() => {}">
    <view class="popup-draggable-area" @touchstart.stop.native="onTouchStart" @touchmove.stop.native="onTouchMove" @touchend.stop.native="onTouchEnd">
      <view class="popup-draggable-area-row-line" ref="headerRef" />
      <!-- <slot name="header"></slot> -->
    </view>
    <scroll-view
      :scroll-y="isScoreY"
      class="popup-draggable-main"
      :style="mainStyle"
			@scroll="handleScroll"
			@scrolltoupper="handleScrolltoupper"
    >
		<view @touchstart.native="onTouchStart" @touchmove.native="onTouchMove" @touchend.native="onTouchEnd">
			<slot></slot>
		</view>
      
    </scroll-view>
  </view>
</template>

<script setup>
  import { computed, onMounted, ref, reactive, nextTick } from 'vue';

  // 单位rpx
  const props = defineProps({
    minHeight: {
      type: [String, Number],
      default: 600
    },
    draggableRange: {
      type: [String, Number],
      default: 200
    }
  });
	
	const handleScroll = e => {
		isScrollTop.value = false;
		console.log('handleScroll+++++++++', isScrollTop.value);
	}
	
	const handleScrolltoupper = () => {
		isScrollTop.value = true;
		console.log('handleScrolltoupper=========', isScrollTop.value);
	}

  const open = () => {
    isShow.value = true;
    isMoveEnd.value = true;
    setTimeout(() => (popupStyle.height = privateMinHeight.value), 300);
    // popupStyle.height = privateMinHeight.value;
  };

  const close = () => {
    isMoveEnd.value = true;
    popupStyle.height = 0;
    return new Promise(resolve => {
      setTimeout(() => {
        isShow.value = false;
        resolve();
      }, 300);
    });
  };

  let startY = 0;
  const isScrollTop = ref(true);
  const isScoreY = ref(false);
  const isMoveEnd = ref(true);
  const isShow = ref(false);
  const privateMinHeight = computed(() => props.minHeight + 'rpx');
  const privateMaxHeight = computed(() => Number(props.minHeight) + Number(props.draggableRange) + 'rpx');
  const popupStyle = reactive({
    height: 0 // 最低高度
  });
  const mainStyle = computed(() => `height: ${parseInt(popupStyle.height) - 75}rpx`);

  const onTouchStart = e => {
    isMoveEnd.value = false;
    startY = e.touches[0].clientY;
		console.log('onTouchStart');
  };

  const onTouchMove = e => {
		console.log('onTouchMove---------', isScrollTop.value);
		
    const currentY = e.touches[0].clientY;
    const deltaY = startY - currentY; //坐标系是向下值越大，往上滑currentY减小，所以用startY - currentY得到正值，高度增加
    // console.log('onTouchMove', popupStyle.height, privateMinHeight.value, privateMaxHeight.value, deltaY);
		if (!isScrollTop.value) return;
    if (parseInt(popupStyle.height) <= parseInt(privateMinHeight.value) && deltaY < 0) return;
    if (parseInt(popupStyle.height) >= parseInt(privateMaxHeight.value) && deltaY > 0) return;
    popupStyle.height = parseInt(popupStyle.height) + deltaY * 2 + 'rpx';
		// console.log('移动了');
    startY = currentY;
		
		if (parseInt(popupStyle.height) >= parseInt(privateMaxHeight.value)) {
			isScoreY.value = true;
		}else {
			isScoreY.value = false;
		}
  };

  const onTouchEnd = () => {
		// console.log('onTouchEnd');
    isMoveEnd.value = true;
    const perRange = props.draggableRange / 4;
    const isMinRange = parseInt(popupStyle.height) <= parseInt(privateMinHeight.value) + perRange * 1;
    const isMaxRange = parseInt(popupStyle.height) >= parseInt(privateMinHeight.value) + (props.draggableRange / 4) * 3;
    if (isMinRange) popupStyle.height = privateMinHeight.value;
    if (isMaxRange) popupStyle.height = privateMaxHeight.value;
		
		if (parseInt(popupStyle.height) >= parseInt(privateMaxHeight.value)) {
			isScoreY.value = true;
		}else {
			isScoreY.value = false;
		}
  };

  defineExpose({ open, close });
</script>

<style lang="scss" scoped>
  .transition {
    transition: height 0.3s ease-out;
  }
  .popup-draggable {
    background: #fff;
    box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 66px;
    width: 100%;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
    // transition: height 0.1s;

    &-area {
      min-height: 70rpx;
      max-height: 70rpx;
      // padding-top: 12px;
      box-sizing: border-box;
      background: #f7f7f7;
      position: relative;
      // border-bottom: 2px solid red;

      &-row-line {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 15%;
        height: 6px;
        border-radius: 3px;
        background-color: lightgray;
        margin-bottom: 6px;
        // position: relative;
        // left: 50%;
        // transform: translateX(-50%);
      }

      // &::after {
      // 	content: '';
      // 	width: 10%;
      // 	height: 6px;
      // 	border-radius: 3px;
      // 	background-color: lightgray;
      // 	// background-color: rbga(0,0,0,0.2);
      // 	// position: absolute;
      // }
    }

    &-main {
      // border: 1px solid;
      // height: calc(100% - 40px);
      // overflow: auto;
    }
  }
</style>
